<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-100 mx-auto">
      <simple-wizard prevButtonText="上一步" nextButtonText="下一步" finishButtonText="完成">
        <template slot="header">
          <h3 class="title" style="color: rgba(0, 0, 0, 0.87);">注册</h3>
          <h5 class="category">This information will let us know more about you.</h5>
        </template>

        <wizard-tab :before-change="() => validateStep('step1')">
          <template slot="label">
            选择身份
          </template>
          <first-step ref="step1" @on-validated="onStepValidated"></first-step>
        </wizard-tab>

        <wizard-tab :before-change="() => validateStep('step2')">
          <template slot="label" >
            填写信息
          </template>
          <second-step ref="step2" :role="registerModel.role" @on-validated="onStepValidated"></second-step>
        </wizard-tab>
      </simple-wizard>
    </div>
  </div>
</template>
<script>
  import FirstStep from './Wizard/FirstStep.vue'
  import SecondStep from './Wizard/SecondStep.vue'
  import {SimpleWizard, WizardTab} from '@/components'

  import {toast} from '@/utils/tools'
  import {post} from '@/utils/ajax'
  import * as api from '@/constants/api'

  export default {
    data() {
      return {
        registerModel: {
          role: '',
        }
      }
    },
    computed:{
    },
    components: {
      FirstStep,
      SecondStep,
      SimpleWizard,
      WizardTab
    },
    methods: {
      validateStep(ref) {
        return this.$refs[ref].validate()
      },
      onStepValidated(validated, model) {
        if(!validated){
          return;
        }
        this.registerModel = {...this.registerModel, ...model}
        if(model.email){
          this.registerComplete();
        }
      },
      registerComplete() {
        let targetRegister = {...this.registerModel}
        if(targetRegister.role === 'orgUser'){
          targetRegister.role = 'user';
        }

        post(api.REGISTER, targetRegister).then(()=>{
          toast('注册成功')
          this.$router.push('/login')
        }).catch(()=>{

        })
      }
    }
  }
</script>
